import React, { Component } from 'react'
import { PageHeader, Steps, Button, message,Form,Input,Cascader } from 'antd';
import './Create.css'
import axios from 'axios'
import RichEditor from './RichEditor';
const { Step } = Steps;

export default class Create extends Component {
  state = {
    current: 0,     //存储页码
    categories:[],  //存储数据库分类 - 菜单信息
    articleform:{}, //存储写的from表单内容：标题+分类
    content:""      //存储子组件传过来的文章内容
  }

  //获取数据库分类
  componentDidMount() {
    axios.get("http://localhost:8000/categories").then(res=>{
        console.log(res.data)
        this.setState({
            categories:res.data
        })
    })
  }

  render() {
    const steps = [
      {
          title: '基本信息'
      },
      {
          title: '文章内容'
      },
      {
          title: '提交文章'
      },
    ];

    // antd 24栅格
    const layout = {
        labelCol: { span: 4 }, //label宽度占几份？
        wrapperCol: { span: 20 },//内容占几份?
    }
    return (
      <div>
        <PageHeader
            className="site-page-header"
            onBack={() => {
                // console.log("back",this.props.history)
                this.props.history.goBack()//返回上一个页面
            }} //返回按钮
            title="添加文章"
            subTitle="各种优美的文章，带你领略不一样的风采"
        />
        {/* 步骤条 */}
        <div style={{ padding: "24px" }}>
            <Steps current={this.state.current} >
                {steps.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </Steps>
            {/* 步骤条对应的内容 */}
            <div className="steps-content" style={{ display: this.state.current === 0 ? 'block' : 'none' }}>
                <Form
                    {...layout}
                    ref="articleform"
                    // layout="vertical" //垂直布局
                    name="form_in_modal"
                >
                    <Form.Item
                        name="title"
                        label="文章标题"
                        rules={[{ required: true, message: 'Please input the title of collection!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="category"
                        label="文章分类"
                        rules={[{ required: true, message: 'Please input the category of collection!' }]}
                    >
                        <Cascader options={this.state.categories} onChange={this.onChange} 
                        fieldNames={{label:"title"}} //自定义lable在哪个字段
                        placeholder="Please select" />
                    </Form.Item>
                </Form>
            </div>
            <div className="steps-content" style={{ display: this.state.current === 1 ? 'block' : 'none',height:"500px",overflow:"auto" }}>
                {/* 给richEditory传来一个函数 */}
                <RichEditor getContent={this.getContent}></RichEditor>
            </div>
            <div className="steps-content" style={{ display: this.state.current === 2 ? 'block' : 'none' }}>

            </div>


            {/* 控制按钮显示         */}
            <div className="steps-action">
                {this.state.current < steps.length - 1 && (
                    <Button type="primary" onClick={() => this.next()} >
                        下一步
                </Button>
                )}
                {this.state.current === steps.length - 1 && (
                    <Button type="primary" onClick={this.handleSubmit}>
                        提交
                </Button>
                )}
                {this.state.current > 0 && (
                    <Button style={{ margin: 8 }} onClick={() => this.prev()}>
                        上一步
                </Button>
                )}
            </div>
        </div>
      </div>
    )
  }

  // 提交文章
  handleSubmit = () =>{
    // 获取用户名和权限
    let {username,roleType} = JSON.parse(localStorage.getItem("users"))
    // 提交
    axios.post("http://localhost:8000/articles",{
      ...this.state.articleform,   // form表单内容
      content:this.state.content,  //文章内容
      author:username,             //作者名字
      roleType:roleType            //权限等级
    }).then(res=>{
      message.success("提交文章成功！")
      //跳转到list页面
      this.props.history.push("/article-manage/list")
    })
  }

  // getContent 回调函数，接收子组件文章内容
  getContent = (content) =>{
    this.setState({
      content
    })
  }

  // 点击下一页
  next() {
    // 如果当前页数为1
    if(this.state.current===0){
        //触发表单校验，获取内容并存储，current+1
        this.refs.articleform.validateFields().then(values=>{
            // console.log(values)
            this.setState({
                articleform:values, //同步此时form的状态
                current:this.state.current+1
            });
        })
        return;
    }
    // 每点击一次，页数加 +1
    const current = this.state.current + 1;
    this.setState({ current });
  }
  // 上一页，每点击一次，页数加 -1
  prev() {
      const current = this.state.current - 1;
      this.setState({ current });
  }
}
